<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <t-time
        v-model="time1"
        :hour-options="hourOptionsTime1"
        :minute-options="minuteOptionsTime1"
        :second-options="secondOptionsTime1"
        with-seconds
      />

      <t-time v-model="time2" :options="optionsFnTime2" with-seconds />

      <t-time v-model="time3" :options="optionsFnTime3" />
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        time1: ref('10:45:40'),
        time2: ref('14:27:20'),
        time3: ref('10:56'),

        hourOptionsTime1: [9, 10, 11, 13, 15],
        minuteOptionsTime1: [0, 15, 30, 45],
        secondOptionsTime1: [0, 10, 20, 30, 40, 50],

        optionsFnTime2(hr, min, sec) {
          if (hr < 6 || hr > 15 || hr % 2 !== 0) {
            return false;
          }
          if (min !== null && (min <= 25 || min >= 58)) {
            return false;
          }
          if (sec !== null && sec % 25 !== 0) {
            return false;
          }
          return true;
        },

        optionsFnTime3(hr) {
          return hr % 2 === 0 || hr % 3 === 0;
        },
      };
    },
  };
</script>
